<template>
	<section>
		<div class="wrap">
			<Card id="card">
				<Breadcrumb class="crumb">
					<BreadcrumbItem to="/">首页</BreadcrumbItem>
					<BreadcrumbItem to="/components/breadcrumb">{{articleContent.cname}}</BreadcrumbItem>
					<BreadcrumbItem>{{articleContent.title}}</BreadcrumbItem>
				</Breadcrumb>
				<div class="article">
					<h2>{{articleContent.title}}</h2>
					<p class="detail">
						<span>发表时间: {{transformTime(articleContent.add_time)}}</span>
						<span>作者: {{articleContent.author}}</span>
						<span>标签:{{articleContent.tname}} </span>
						<span>浏览数:{{articleContent.hits}} </span>
					</p>
					<img :src="articleContent.img" />

					<Alert class="alignL">{{articleContent.excerpt}}</Alert>

					<p class="alignL content" type="warning" v-html="articleContent.content"></p>
					<p class="alignL">来源:
						<a :href="articleContent.post_source">{{articleContent.post_source}}</a>
					</p>
					<div class="bottom">
						<a @click="turnTo(articleContent.prev.id)" class="prev" v-if="articleContent.prev">
							<Icon type="arrow-left-a"></Icon> {{articleContent.prev.title}}
						</a>
						<a @click="turnTo(articleContent.next.id)" class="next" v-if="articleContent.next">
							{{articleContent.next.title}}
							<Icon type="arrow-right-a"> </Icon>
						</a>
					</div>
				</div>
			</Card>
		</div>
	</section>
</template>

<script>
	import Server from '../server/server.js'
	export default {
		data() {
			return {
				articleContent: []
			}
		},
		methods: {
			getDatas() {

				const aid = this.$route.query.aid;
				Server.articleContents(aid).then((data) => {

					if(!data.status) {
						this.info(true, data.mes || '数据获取失败!');
						this.$router.push('/')
						return;
					}
					this.articleContent = data;
					console.log(this.articleContent)

				})

			},
			turnTo(id) {
				this.$router.push({
					path: "/article",
					query: {
						aid: id
					}
				})
				this.$parent.$parent.$parent.$parent.reload()
			}

		},
		mounted() {
			this.getDatas();

		}

	}
</script>

<style scoped="scoped" lang="less">
	section {
		width: 100%;
		/*margin-bottom: 50px;*/
		.wrap {
			width: 100%;
			min-width: 600px;
			float: right;
			margin: 0 20px 0 0;
			#card {
				margin-bottom: 50px;
			}
			.crumb {
				background: #f4f4f7;
				padding: 3px 15px;
				border-radius: 5px;
			}
			.article {
				width: 90%;
				margin: 0 auto;
				text-align: center;
				img {
					width: 100%;
					border-radius: 5px;
				}
				h2 {
					margin: 25px 0 10px 0;
				}
				.detail {
					margin-bottom: 10px;
					span {
						margin-right: 10px;
						opacity: 0.6;
					}
				}
				.alignL {
					text-align: left;
					margin: 10px 0;
				}
				.content {
					margin-top: 20px;
					border-left: 8px solid gainsboro;
					padding-left: 10px;
				}
			}
		}
		@media only screen and (max-width: 640px) {
			.wrap {
				width: 100% !important;
				min-width: 0;
				margin: 0;
				#card {
					.ivu-card-body {
						padding: 0px !important;
					}
				}
				.article {
					.content {
						margin-top: 20px;
						border-left: none;
						padding-left: 0px;
					}
				}
			}
		}
		.bottom {
			position: relative;
			width: 100%;
			height: 40px;
			padding-top: 10px;
			.prev {
				position: absolute;
				left: 2%;
				font-size: 16px;
			}
			.next {
				position: absolute;
				right: 2%;
				font-size: 16px;
			}
		}
	}
</style>